<!-- This Source Code Form is subject to the terms of the Mozilla Public
     License, v. 2.0. If a copy of the MPL was not distributed with this
     file, You can obtain one at https://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>Schemio</title>
        <link rel="stylesheet" href="{{ routePrefix }}/assets/css/main.css">
        <link rel="stylesheet" href="{{ routePrefix }}/assets/css/syntax-highlight.css">
        <link rel="stylesheet" href="{{ routePrefix }}/assets/css/all.min.css">
        <link rel="stylesheet" href="{{ routePrefix }}/assets/custom-fonts/fonts.css">
        <link rel="stylesheet" href="{{ routePrefix }}/assets/katex/katex.min.css">
    </head>
    <body data-route-prefix="{{ routePrefix }}" data-theme="light">
        <script>
            const theme = localStorage.getItem('theme');
            if (theme) {
                document.body.setAttribute('data-theme', theme);
            } else if (window.matchMedia) {
                if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.body.setAttribute('data-theme', 'dark');
                }
                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                    const newColorScheme = event.matches ? "dark" : "light";
                    document.body.setAttribute('data-theme', newColorScheme);
                });
            }
        </script>
        <div id="app"></div>
        <script src="{{ routePrefix }}/assets/schemio.app.js"></script>
    </body>
</html>
